//当鼠标悬浮时，显示背景颜色
function showBGColor(){
    // event表示当前发生的事件
    // event.srcElement  : 事件源
    // alert(event.srcElement);
    // alert(event.srcElement.tagName);  -- TD

    if (event && event.srcElement && event.srcElement.tagName=="TD") {
        var td = event.srcElement;
        // td.parentElement 表示获取td的父元素  -> TR
        var tr = td.parentElement;
        // 如果想要通过js代码设置某节点的背景颜色样式,则需要加上  .style
        tr.style.backgroundColor = "yellow";
        // tr.cells 表示获取这个tr中的所有的单元格
        var tds = tr.cells;
        for (var i = 0; i < tds.length; i++) {
            tds[i].style.color = "red";
        }

    }
}

// 当鼠标离开时，恢复原始样式
function clearBGColor() {
    if (event && event.srcElement && event.srcElement.tagName == "TD") {
        var td = event.srcElement;  // 取td
        var tr = td.parentElement;  // 取tr
        tr.style.backgroundColor = "transparent";
        var tds = tr.cells;
        for (var i = 0; i < tds.length; i++) {
            tds[i].style.color = "slateblue";
        }
    }
}

// 当鼠标悬浮在单价单元格时，显示手势
function shouwHand(){
    if (event && event.srcElement && event.srcElement.tagName == "TD") {
        var td = event.srcElement;
        // cursor : 光标
        td.style.cursor = "hand";
    }
}